<template>
  <div>
    <table class="table table-bordered">
      <thead>
        <tr>
          <th scope="col">阶段序号</th>
          <th scope="col">阶段名称</th>
          <th scope="col">所属学科</th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="bm in stageList"
          v-bind:key="bm.id"
          v-on:click="selectStage(bm.id)"
          v-bind:class="{ CRSelectedBG: checkSelected(bm.id) }"
        >
          <td>{{ bm.id }}</td>
          <td>{{ bm.stname }}</td>
          <td>{{ bm.subject.sname }}</td>
        </tr>
      </tbody>
    </table>
    <div class="row">
      <div class="col">个数:{{ count }} 页数:{{ page }}/{{ pageCount }}</div>
      <div class="col">
        <nav aria-label="阶段分页">
          <ul class="pagination">
            <li class="page-item">
              <a class="page-link" href="#" @click="firstPage()">首页</a>
            </li>
            <li class="page-item">
              <a class="page-link" href="#" @click="previousPage()">上页</a>
            </li>
            <li class="page-item">
              <a class="page-link" href="#" @click="nextPage()">下页</a>
            </li>
            <li class="page-item">
              <a class="page-link" href="#" @click="lastPage()">末页</a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "StageList",
  data() {
    return {
      stageList: [],
      id: 0,
      page: 1,
      count: 0,
      pageCount: 0,
      rows: 5,
    };
  },
  methods: {
    getList() {
      this.axiosJSON
        .get("/stage/getAll", {
          params: {
            rows: this.rows,
            page: this.page,
          },
        })
        .then((result) => {
          this.stageList = result.data.list;
          this.count = result.data.total;
          this.pageCount = result.data.pages;
        });
    },
    selectStage(id) {
      //点击TR事件处理
      this.id = id;
      this.$parent.id = id; //辅助给父组件的数据属性
    },
    checkSelected(id) {
      //检查id是否被选中
      return this.id == id;
    },
    nextPage() {
      if (this.page < this.pageCount) {
        this.page++;
        this.getList();
      }
    },
    previousPage() {
      if (this.page > 1) {
        this.page--;
        this.getList();
      }
    },
    firstPage() {
      this.page = 1;
      this.getList();
    },
    lastPage() {
      this.page = this.pageCount;
      this.getList();
    },
  },
  mounted() {
    this.$parent.stageTitle = "阶段管理";
    this.$parent.id = 0;
    this.oaevent.$on("updateStageList", () => {
      this.getList();
    }); //响应updateStageList事件
    this.getList();
  },
};
</script>

<style>
</style>
